<template>
  <div class="xheader">
    <div class="xhead-l">
      <i class="iconfont icon-linelist"></i>
    </div>
    <div class="xhead-c">
      <span class="active">明星同款</span>
      <span>红人</span>
      <span>文章</span>
    </div>
    <div class="xhead-r">
      <i class="iconfont icon-search"></i>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {}
</script>

<style scoped>
  .xheader{
    width: 100%;
    background:#1B1B1B;
    display: flex;
    justify-content: space-around;
    border: 1px solid #dddddd;
  }
  .xhead-l,.xhead-r{
    width: 15%;
  }
  .xheader .iconfont{
    display: block;
    width: 0.2rem;
    height: 0.2rem;
    margin:0 auto;
    padding: 0.2rem 0;
    color: white;
  }
  .xhead-c{
    display: flex;
    width: 70%;
  }
  .xheader span{
    display: block;
    font-size:16px;
    width: 33.3%;
    text-align: center;
    font-weight: 600;
    color:white;
    padding: 0.2rem 0;
  }
  .active{
    border-bottom: 2px solid #c91254;
    color: #c91254!important;
  }
</style>
